<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
	<base href="<%=basePath%>"/>
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
	<!--  PAGINATION plugin -->
	<link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
	<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
<script type="text/javascript">

	$(function(){

		queryActivityForPageByCondition(1,10);
		//给查询按钮添加单击事件
		$("#queryBtn").click(function () {
			queryActivityForPageByCondition(1,$("#demo_page").bs_pagination("getOption","rowsPerPage"))
		})

		//给创建按钮绑定单击事件
		$("#createBtn").click(function () {
			$("#createForm")[0].reset();
			$("#createActivityModal").modal("show");
		})

		$(".myDate").datetimepicker({
			language: "zh-CN",//语言
			format: "yyyy-mm-dd",//日期格式
			minView: "month",//日期选择器上最小能选择的日期的视图
			initData: new Date(),//日历的初始化时间，默认当前时间
			autoclose: true,//选择日期后，是否自动关闭日历
			todayBtn: true,//是否显示当前日期的按钮
			clearBtn: true,//是否显示清空按钮
			container:"#query-div" //在创建的模态窗口上加日历

		})
		//给保存按钮绑定单击事件
		$("#saveCreateBtn").click(function () {
			//收集参数
			var owner = $("#create-marketActivityOwner").val();
			var name = $.trim( $("#create-marketActivityName").val());
			var startDate = $("#create-startTime").val();
			var endDate = $("#create-endTime").val();
			var cost = $.trim($("#create-cost").val());
			var description = $.trim($("#create-describe").val());
			//表单验证
			if(owner==""){
				alert("所有者不能为空！");
				return;
			}
			if(name==""){
				alert("名称不能为空！");
				return;
			}
			if(startDate!=''&&endDate!=''){
				if(startDate>endDate){
					alert("结束日期不能小于开始日期！");
					return;
				}
			}
			var regExp = /^(([1-9]\d*)|0)$/;
			if(cost!=""&&!regExp.test(cost)){
				alert("成本只能为非负正整数！");
				return;
			}
			//发送请求
			$.ajax({
				url:"workbench/activity/saveCreateActivity.do",
				data:{
					owner:owner,
					name:name,
					startDate:startDate,
					endDate:endDate,
					cost:cost,
					description:description
				},
				type:"post",
				dataType:"json",
				success:function (data) {
					if(data.code=="1"){
						$("#createActivityModal").modal("hide");
						queryActivityForPageByCondition(1,$("#demo_page").bs_pagination("getOption","rowsPerPage"))
					}else {
						alert(data.message);
						$("#createActivityModal").modal("show");
					}
				}
			})

		})

		//给全选按钮添加单击事件
		$("#checkAll").click(function () {
			$("#tBody input[type=checkbox]").prop("checked",this.checked);
		})
		//给列表中的复选框添加单击事件
		$("#tBody").on("click"," input[type=checkbox]",function () {
			$("#checkAll").prop("checked",$("#tBody input[type=checkbox]").length==$("#tBody input[type=checkbox]:checked").length);
		})


		//给修改按钮添加单击事件
		$("#editBtn").click(function () {
			//收集参数
			if($("#tBody input[type=checkbox]:checked").length==0){
				alert("请选择要修改的记录！")
			}else if ($("#tBody input[type=checkbox]:checked").length>1){
				alert("一次只能修改一条记录！")
			}else{
				var id = $("#tBody input[type=checkbox]:checked").val();
				$.ajax({
					url:"workbench/activity/editActivityById.do",
					data:{
						id:id
					},
					type:"post",
					dataType:"json",
					success:function (data) {
						$("#edit-id").val(data.id);
						$("#edit-marketActivityOwner").val(data.owner);
						$("#edit-marketActivityName").val(data.name);
						$("#edit-startTime").val(data.startDate);
						$("#edit-endTime").val(data.endDate);
						$("#edit-cost").val(data.cost);
						$("#edit-describe").val(data.description);

						$("#editActivityModal").modal("show");
					}
				})
			}

		})
		//给更新按钮添加单击事件
		$("#saveEditBtn").click(function () {
			//收集参数
			var id = $("#edit-id").val();
			var owner = $("#edit-marketActivityOwner").val();
			var name = $.trim( $("#edit-marketActivityName").val());
			var startDate = $("#edit-startTime").val();
			var endDate = $("#edit-endTime").val();
			var cost = $.trim($("#edit-cost").val());
			var description = $.trim($("#edit-describe").val());
			//表单验证
			if(owner==""){
				alert("所有者不能为空！");
				return;
			}
			if(name==""){
				alert("名称不能为空！");
				return;
			}
			if(startDate!=''&&endDate!=''){
				if(startDate>endDate){
					alert("结束日期不能小于开始日期！");
					return;
				}
			}
			var regExp = /^(([1-9]\d*)|0)$/;
			if(cost!=""&&!regExp.test(cost)){
				alert("成本只能为非负正整数！");
				return;
			}
			//发送请求
			$.ajax({
				url:"workbench/activity/saveEditActivity.do",
				data:{
					id:id,
					owner:owner,
					name:name,
					startDate:startDate,
					endDate:endDate,
					cost:cost,
					description:description
				},
				type:"post",
				dataType:"json",
				success:function (data) {
					if(data.code=="1"){
						$("#editActivityModal").modal("hide");
						queryActivityForPageByCondition($("#demo_page").bs_pagination("getOption","currentPage"),$("#demo_page").bs_pagination("getOption","rowsPerPage"))
					}else {
						alert(data.message);
						$("#editActivityModal").modal("show");
					}
				}
			})
		})


		//给删除按钮添加单击事件
		$("#delBtn").click(function () {
			//收集参数
			if($("#tBody input[type=checkbox]:checked").length==0){
				alert("请选择要删除的记录！")
			}else {
				var check = $("#tBody input[type=checkbox]:checked");
				var ids = "";
				$.each(check,function (index,obj) {
					ids+= "id=" + this.value;
					if(index<check.length-1){
						ids+="&";
					}
				})
				if(confirm("确定删除吗？")){
					$.ajax({
						url:"workbench/activity/deleteActivityByIds.do",
						data:ids,
						type:"post",
						dataType:"json",
						success:function (data) {
							if(data.code=="1"){
								queryActivityForPageByCondition(1,$("#demo_page").bs_pagination("getOption","rowsPerPage"))
							}else {
								alert(data.message);
							}
						}
					})
				}
			}
		})


		//给批量下载列表添加单击事件
		$("#exportActivityAllBtn").click(function () {
			window.location.href="workbench/activity/exportActivityAll.do";
		})
		//给选择下载列表添加单击事件
		$("#exportActivityXzBtn").click(function () {
			//收集参数
			if($("#tBody input[type=checkbox]:checked").length==0){
				alert("请选择要导出的记录！")
			}else {
				var check = $("#tBody input[type=checkbox]:checked");
				var ids = "";
				$.each(check, function (index, obj) {
					ids += "id=" + this.value;
					if (index < check.length - 1) {
						ids += "&";
					}
				})
				window.location.href="workbench/activity/exportActivityXz.do?"+ids;
			}
		})

		//给导入按钮绑定单击事件
		$("#importActivityBtn").click(function () {
			//收集参数
			var fileName = $("#activityFile").val();
			//表单验证
			var suffix = fileName.substr(fileName.lastIndexOf(".")+1);
			if(suffix!="xls"){
				alert("仅支持后缀名为xls的文件");
				return;
			}
			var activityFile = $("#activityFile")[0].files[0];
			if(activityFile.size>1024*1024*5){
				alert("文件大小不超过5MB");
				return;;
			}
			//发送请求
			var formData = new FormData;
			formData.append("activityFile",activityFile)

			$.ajax({
				url:"workbench/activity/importActivity.do",
				data:formData,
				type:"post",
				dataType:"json",
				processData:false,
				contentType:false,
				success:function (data) {
					if(data.code=="1"){
						$("#importActivityModal").modal("hide");
						alert("成功添加"+data.count+"条记录")
						queryActivityForPageByCondition(1,$("#demo_page").bs_pagination("getOption","rowsPerPage"))
					}else {
						alert(data.message);
					}
				}
			})
		})
	});
	
	//分页函数
	function queryActivityForPageByCondition(pageNo,pageSize) {
		//收集参数
		var name=$("#queryName").val();
		var owner=$("#queryOwner").val();
		var startDate=$("#queryStartDate").val();
		var endDate=$("#queryEndDate").val();
		$.ajax({
			url:"workbench/activity/queryActivityForPageByCondition.do",
			data:{
				beginNo:(pageNo-1)*pageSize,
				pageSize:pageSize,
				name:name,
				owner:owner,
				startDate:startDate,
				endDate:endDate
			},
			type:"post",
			dataType:"json",
			success:function (data) {
				var htmlStr="";
				//遍历
				$.each(data.activityList,function (index,obj) {
					//拼接html
					htmlStr+="<tr class=\"active\">";
					htmlStr+="<td><input type=\"checkbox\" value="+obj.id+" /></td>";
					htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='workbench/activity/detail.do?id="+obj.id+"';\">"+obj.name+"</a></td>";
					htmlStr+="<td>"+obj.owner+"</td>";
					htmlStr+="<td>"+obj.startDate+"</td>";
					htmlStr+="<td>"+obj.endDate+"</td>";
					htmlStr+="</tr>";
				})
				//把拼接好的html放到tbody中
				$("#tBody").html(htmlStr);

				//计算总页数
				var totalPages = 1;
				if(data.totalRows%pageSize==0){
					totalPages=data.totalRows/pageSize;
				}else {
					totalPages=parseInt(data.totalRows/pageSize) +1;
				}
				//使用分页插件
				$("#demo_page").bs_pagination({
					currentPage: pageNo,//当前页
					rowsPerPage: pageSize,//每页显示条数
					totalRows: data.totalRows,//总条数
					totalPages: totalPages,//总页数

					visiblePageLinks: 5,//显示的翻页卡片数

					showGoToPage: true,//是否显示 跳转到第几页
					showRowsPerPage: true,//是否显示 每页显示条数
					showRowsInfo: true,//是否显示 记录的信息

					//每次切换页号都会自动触发此函数，函数能够返回切换之后的页号和每页显示条数
					onChangePage: function (e, pageObj) {
						$("#checkAll").prop("checked",false);
						queryActivityForPageByCondition(pageObj.currentPage, pageObj.rowsPerPage);
					}
				});
			}
		})


	}


</script>
</head>
<body>

	<!-- 创建市场活动的模态窗口 -->
	<div class="modal fade" id="createActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form id="createForm" class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-marketActivityOwner">
									<option></option>
									<c:forEach items="${userList}" var="user">
										<option value="${user.id}">${user.name}</option>
									</c:forEach>
								</select>
							</div>
                            <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-marketActivityName">
                            </div>
						</div>
						
						<div class="form-group">
							<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control myDate" readonly id="create-startTime">
							</div>
							<label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control myDate" readonly id="create-endTime">
							</div>
						</div>
                        <div class="form-group">

                            <label for="create-cost" class="col-sm-2 control-label">成本</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-cost">
                            </div>
                        </div>
						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-describe"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="saveCreateBtn" type="button" class="btn btn-primary" >保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改市场活动的模态窗口 -->
	<div class="modal fade" id="editActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
						<input type="hidden" id="edit-id">
						<div class="form-group">
							<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-marketActivityOwner">
									<option></option>
									<c:forEach items="${userList}" var="user">
										<option value="${user.id}">${user.name}</option>
									</c:forEach>
								</select>
							</div>
                            <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
                            </div>
						</div>

						<div class="form-group">
							<label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control myDate" readonly id="edit-startTime" value="2020-10-10">
							</div>
							<label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control myDate" readonly id="edit-endTime" value="2020-10-20">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-cost" value="5,000">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-describe">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="saveEditBtn">更新</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 导入市场活动的模态窗口 -->
    <div class="modal fade" id="importActivityModal" role="dialog">
        <div class="modal-dialog" role="document" style="width: 85%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
                </div>
                <div class="modal-body" style="height: 350px;">
                    <div style="position: relative;top: 20px; left: 50px;">
                        请选择要上传的文件：<small style="color: gray;">[仅支持.xls格式]</small>
                    </div>
                    <div style="position: relative;top: 40px; left: 50px;">
                        <input type="file" id="activityFile">
                    </div>
                    <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
                        <h3>重要提示</h3>
                        <ul>
                            <li>操作仅针对Excel，仅支持后缀名为xls的文件。</li>
                            <li>给定文件的第一行将视为字段名。</li>
                            <li>请确认您的文件大小不超过5MB。</li>
                            <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
                            <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
                            <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
                            <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
                </div>
            </div>
        </div>
    </div>
	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>市场活动列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div id="query-div" class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input id="queryName" class="form-control" type="text">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input id="queryOwner" class="form-control" type="text">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input class="form-control myDate" readonly type="text" id="queryStartDate" />
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input class="form-control myDate" readonly type="text" id="queryEndDate">
				    </div>
				  </div>
				  
				  <button id="queryBtn" type="button" class="btn btn-default">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button id="createBtn" type="button" class="btn btn-primary" ><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button id="editBtn" type="button" class="btn btn-default" ><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button id="delBtn" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>
				<div class="btn-group" style="position: relative; top: 18%;">
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal" ><span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）</button>
                    <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）</button>
                    <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）</button>
                </div>
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="checkAll" /></td>
							<td>名称</td>
                            <td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody id="tBody">
					<%--<tr class="active">
                        <td><input type="checkbox" /></td>
                        <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">发传单</a></td>
                        <td>zhangsan</td>
                        <td>2020-10-10</td>
                        <td>2020-10-20</td>
                    </tr>
                    <tr class="active">
                        <td><input type="checkbox" /></td>
                        <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">发传单</a></td>
                        <td>zhangsan</td>
                        <td>2020-10-10</td>
                        <td>2020-10-20</td>
                    </tr>--%>
					</tbody>
				</table>
				<%--创建分页插件容器--%>
				<div id="demo_page"></div>
			</div>

			<%--<div style="height: 50px; position: relative;top: 30px;">
				<div>
					<button type="button" class="btn btn-default" style="cursor: default;">共<b>50</b>条记录</button>
				</div>
				<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
					<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
					<div class="btn-group">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							10
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu">
							<li><a href="#">20</a></li>
							<li><a href="#">30</a></li>
						</ul>
					</div>
					<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
				</div>
				<div style="position: relative;top: -88px; left: 285px;">
					<nav>
						<ul class="pagination">
							<li class="disabled"><a href="#">首页</a></li>
							<li class="disabled"><a href="#">上一页</a></li>
							<li class="active"><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">下一页</a></li>
							<li class="disabled"><a href="#">末页</a></li>
						</ul>
					</nav>
				</div>
			</div>--%>
			
		</div>
		
	</div>
</body>
</html>